<template>
  <div class="login-home">
    <div class="top"></div>

    <div class="flipper">
      <div class="login-div normal-shadow">
        <!-- <h3 style="text-align: center">登录</h3> -->
        <el-divider>登录</el-divider>
        <el-form ref="ruleFormRef" :model="formData" onsubmit="return false" :rules="formRules">
          <el-form-item label=""> 账号 </el-form-item>
          <el-form-item label="" prop="username">
            <el-input v-model="formData.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label=""> 密码 </el-form-item>
          <el-form-item label="" prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-form-item label="">
            <el-checkbox label="记住密码" v-model="formData.isRemember"></el-checkbox>
          </el-form-item>

          <el-form-item label="">
            <div style="flex: 1; text-align: center">
              <el-button type="primary" native-type="submit" @click="submitForm(ruleFormRef)"
                >提交</el-button
              >
              <el-button type="default" native-type="reset">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-divider>
          <el-button link type="info" @click="switchToRegister">注册</el-button>
        </el-divider>
      </div>

      <div class="register-div normal-shadow">
        <!-- <h3 style="text-align: center">登录</h3> -->
        <el-divider>注册</el-divider>
        <el-form :model="formData" onsubmit="return false" :rules="formRules">
          <el-form-item label=""> 账号 </el-form-item>
          <el-form-item label="" prop="username">
            <el-input v-model="formData.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label=""> 密码 </el-form-item>
          <el-form-item label="" prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox label="记住密码" v-model="formData.isRemember"></el-checkbox>
          </el-form-item>
          <el-form-item label="">
            <div style="flex: 1; text-align: center">
              <el-button type="primary" native-type="submit">提交</el-button>
              <el-button type="default" native-type="reset">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-divider>
          <el-button link type="info" @click="switchToLogin">登录</el-button>
        </el-divider>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

interface FormType {
  username: ''
  password: ''
  isRemember: false
}

const formData = $ref<FormType>({
  username: '',
  password: '',
  isRemember: false
})

const formRules: FormRules<FormType> = {
  username: [
    {
      required: true,
      message: '账号必填'
    }
  ],
  password: [{ required: true, message: '密码必填' }],
  isRemember: [{ required: true }]
}

// -------------------- method ----------------

const submitForm = (_ruleFormRef: FormInstance | undefined) => {
  _ruleFormRef?.validate((value) => {
    if (value === true) {
      localStorage.setItem('firstLoginDate', new Date().toDateString())
      location.href = '/'
    }
  })
}

const switchToRegister = () => {
  const list = Array.from(document.getElementsByClassName('flipper'))
  if (list && list.length > 0) {
    const target = list[0]
    target.classList.add('rotate180')
  }
}

const switchToLogin = () => {
  const list = Array.from(document.getElementsByClassName('flipper'))
  if (list && list.length > 0) {
    const target = list[0]
    target.classList.remove('rotate180')
  }
}
</script>
<style lang="scss" scoped>
$topHeight: 38%;

.login-home {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  // offset: 0;

  perspective: 1000px;

  .top {
    background-color: var(--el-color-primary-dark-2);
    height: $topHeight;
  }

  .rotate180 {
    transform: translate(-50%, -38%) rotateY(180deg) !important;
  }

  .flipper {
    transform-style: preserve-3d; // 少了这个的话就没有背面了

    position: absolute;

    width: 400px;
    height: 400px;
    left: 50%;
    top: $topHeight;

    transition: transform 1s;
    transform: translate(-50%, -38%);

    // &:hover {
    //   transform: translate(-50%, -38%) rotateY(180deg);
    // }

    .login-div {
      backface-visibility: hidden;
      background-color: var(--color-background);
      width: 400px;
      height: 400px;
      padding: 20px 40px;
      border-radius: 5px;
      position: absolute;
      top: 0;
      left: 0;

      transform: rotateY(0deg);
    }

    .register-div {
      backface-visibility: hidden;
      background-color: var(--color-background);
      width: 400px;
      height: 400px;
      padding: 20px 40px;
      border-radius: 5px;
      position: absolute;
      top: 0;
      left: 0;

      transform: rotateY(180deg);
    }
  }
}
</style>
